<script setup >
import { onMounted, ref, reactive, defineProps } from "vue";
import { useStaffStore } from "@/stores/staff";
import { useRoute } from "vue-router";
import router from '@/router/index'
const route = useRoute()

onMounted(() => {
  if (route.query.data) {
    const res = route.query.data;
    const row = JSON.parse(decodeURIComponent(res));
    for (let key in row) {
      form[key] = row[key]
    }
    form.cloneCipher = form.cipher
  }
  if (form._id) {
    title.value = "员工管理"
  } else {
    title.value = '新建员工'
  }
})

const staffStore = useStaffStore();

const title = ref("新增员工");
let form = reactive({});
const formRef = ref(null);
const passwordCheck = () => {
  if (form.cipher === form.cloneCipher) {
    return true
  } else {
    return false
  }
}
const rules = reactive({
  name: {
    required: true,
    message: "请输入姓名",
    trigger: "blur",
  },
  post: {
    required: true,
    message: "请输入岗位",
    trigger: "blur",
  },
  id: {
    required: true,
    message: "请输入账号",
    trigger: "blur",
  },
  cipher: {
    required: true,
    message: "请输入密码 ",
    trigger: "blur",
  },
  cipher: {
    required: true,
    message: "请输入密码 ",
    trigger: "blur",
  },
  cloneCipher: {
    validator: passwordCheck,
    message: '两次密码保持一致',
    trigger: 'input'
  },
  role: {
    required: true,
    message: "请选择role",
    trigger: "blur",
  },
  on: {
    required: true,
    message: "请选择启用状态",
    trigger: "blur",
  },
});

const subClk = (e) => {
  e.preventDefault();
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      if (form._id) {
        await staffStore.eidorList(form);
      } else {
        await staffStore.addList(form);
      }
      router.push("/staff");
      console.log("成功");
    } else {
      console.log("失败");
    }
  });
};

const cancleClk = () => {
  router.push("/staff");
}

</script>

<template>
  <n-card :title="title">
    <n-form ref="formRef" :model="form" :rules="rules" label-placement="left" label-width="auto"
      require-mark-placement="right-hanging" size="small" :style="{
        maxWidth: '640px',
      }">
      <n-form-item style="margin-top: 30px" label="姓名" path="name">
        <n-input v-model:value="form.name" placeholder="请输入姓名" />
      </n-form-item>
      <n-form-item label="岗位" path="post">
        <n-input v-model:value="form.post" placeholder="请输入岗位" />
      </n-form-item>
      <n-form-item label="登录账号" path="id">
        <n-input v-model:value="form.id" placeholder="请输入账号" />
      </n-form-item>
      <n-form-item label="登录密码" path="cipher">
        <n-input v-model:value="form.cipher" type="password" show-password-on="mousedown" placeholder="请输入密码" />
      </n-form-item>
      <n-form-item label="重复密码" path="cloneCipher">
        <n-input v-model:value="form.cloneCipher" type="password" show-password-on="mousedown" placeholder="请重复输入密码" />
      </n-form-item>
      <n-form-item label="选择角色" path="role">
        <n-radio-group v-model:value="form.role">
          <n-space>
            <n-radio value="admin"> role1 </n-radio>
            <n-radio value="edior"> role2 </n-radio>
          </n-space>
        </n-radio-group>
      </n-form-item>
      <n-form-item label="是否启用" path="on">
        <n-radio-group v-model:value="form.on">
          <n-space>
            <n-radio value="1"> 是 </n-radio>
            <n-radio value="0"> 否 </n-radio>
          </n-space>
        </n-radio-group>
      </n-form-item>
    </n-form>
    <div>
      <n-button id="btn" @click="subClk" style="
          text-align: center;
          font-size: 14px;
          width: 150px;
          border: none;
          line-height: 30px;
          background-color: cornflowerblue;
          color: aliceblue;
        ">
        提交
      </n-button>
      <n-button id="btn" @click="cancleClk" style="
          text-align: center;
          font-size: 14px;
          width: 150px;
          border: none;
          line-height: 30px;
          color: black;
          margin-left: 20px;
        ">
        取消
      </n-button>
    </div>
  </n-card>
</template>

<style scoped>
.n-card>>>.n-card-header {
  background-color: #e9eff5;
  height: 45px;
  font-size: 16px;
}

</style>